import React from 'react'

// hash模式 （hash后面的变更不会触发请求）
// import { HashRouter as Router,Link,Route } from 'react-router-dom'

// history模式 （需要后端配合使用）
import { BrowserRouter as Router,Link,Route } from 'react-router-dom'

function Home() {
  return (
    <div>
      <h1>首页</h1>
    </div>
  )
}

function Me(props) {
  console.log(props)
  return (
    <div>
      <h1>个人中心</h1>
    </div>
  )
}

function Product() {
  return (
    <div>
      <h1>产品页面</h1>
    </div>
  )
}

function News(props) {
  console.log(props)
  return (
    <div>
      新闻页,新闻id: { props.id }
    </div>
  )
}


class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      link: {
        // 跳转的路径
        pathname: '/me',
        // get请求参数
        search: '?username=admin',
        // 设置的HASH值
        hash: '#abc',
        // 传入组件的数据
        state: {msg: 'helloworld'}
      }
    }
  }
  render () {
    return (
      <div id="app">
        普通内容
        <Router>
          <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to={ this.state.link }>个人中心</Link>
            <Link to="/news/45789">新闻页面</Link>
          </div>
          <Route path="/" exact component={ Home }></Route>
          <Route path="/product" component={ Product }></Route>
          <Route path="/me" exact component={ Me }></Route>
          <Route path="/news/:id" component={ News }></Route>
        </Router>
      </div>
    )
  }
}

export default App
